<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>采购增加页面</title>
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
</head>
<body>
	<div class="demoTable">
	  合同供应商:
	  <div class="layui-inline layui-form">
			<select name="conId" id="conId"
				autocomplete="off" class="layui-input">
				<option value="0"></option>
			</select>
	  </div>
	  <button class="layui-btn" data-type="tjcl" id="tjcl">添加材料</button>
	  <button class="layui-btn" data-type="bcdd" id="bcdd">保存订单</button>
	</div>
	<table class="layui-hide" id="poBreakdown" lay-filter="demo"></table>
<script type="text/html" id="input">
	<div class="layui-inline">
		<input class="layui-input" maxlength="5" style="border:none;padding-bottom:8px;" name="pobNum" id="{{d.pobId}}" autocomplete="off" placeholder="输入材料数量" value="{{d.pobNum}}" onkeyup="clearNoNum(this);">
	</div>
</script>

<script type="text/html" id="inputs">
	<div class="layui-inline">
		<input class="layui-input" maxlength="15" style="border:none;padding-bottom:8px;" name="pobRemark" id="{{d.pobId+d.matId}}" autocomplete="off" placeholder="输入材料备注" value="{{d.pobRemark}}"">
	</div>
</script>

<script type="text/html" id="inputss">
	<div class="layui-inline">
		<input class="layui-input  layui-disabled" readonly="readonly"  maxlength="9" style="border:none;padding-bottom:8px;" name="pobPrice" id="{{d.matId}}" autocomplete="off" placeholder="总价格为" value="{{d.pobPrice}}"">
	</div>
</script>
<script type="text/javascript" src="../../../res/js/base.js"></script>
<script type="text/javascript" src="../../../res/mln/getUrlParam.js"></script>
<script type="text/javascript" src="../../../res/js/jquery-1.10.2.js"></script>
<script src="../../../layui/layui.js"></script>

<script>

layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
	  var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,upload = layui.upload //上传
	  ,element = layui.element
	  ,form=layui.form; //元素操作
	 
	  //监听Tab切换
	  element.on('tab(demo)', function(data){
	    layer.msg('切换了：'+ this.innerHTML);
	    console.log(data);
	  });
	  //alert(getUrlParam('poId'));
	  //执行一个 table 实例
	  table.render({
	     elem: '#poBreakdown'
	    ,url: getRootPath()+'poBreakdown/findAll.action?poId='+getUrlParam('poId') //数据接口
	    ,page: true //开启分页
	    ,method:'post'
	    ,cols: [[ //表头
	       {type:'checkbox', fixed: 'left'}
	      /* ,{field: 'pobId ', title: '明细ID', width:120, fixed: 'left'} 
	      ,{field: 'matId', title: '材料ID', width:120, fixed: 'left'}
	      ,{field: 'poId', title: '订单ID', width:120, fixed: 'left'}*/
	      ,{field: 'pobName', title: '材料名称', width:200}
	      ,{field: 'matPrice', title: '材料单价', width:200}
	      ,{field: 'pobNum', title: '材料重量(g)', width:200,templet:'#input'}
	      ,{field: 'pobPrice', title: '材料总价', width:200,templet:'#inputss'}
	      ,{field: 'pobRemark', title: '材料备注', width:220,templet:'#inputs'}
	    ]]
	  	,id: 'testReload'
	  	,done: function(res){
	  		var sumPrice=0;
		   	var sumNum=0;
		    var s=document.getElementsByName('pobNum');
		   	for(var i=0;i<s.length; i++){
		   		//alert(s[i].value);
		   		sumNum=sumNum+Number(s[i].value);
		   	}
		   	var ss=document.getElementsByName('pobPrice');
			for(var i=0;i<ss.length; i++){
		   		//alert(ss[i].value);
		   		sumPrice=sumPrice+Number(ss[i].value);
		   	}
		   	$("#poSumprice").val(sumPrice);
		   	$("#poSumnum").val(sumNum);
	  	}
	  });
	  
	  
	  //监听工具条
	  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    
	  });
	  //条件查询
	  var $ = layui.$;
	
	  var url = "../../../contractTableAction/findAll.action";
	  $.post(url,null,function(mes){
		  for(var i=0;i<mes.length;i++){
			  $("#conId").append("<option value="+mes[i].conId+">"+mes[i].conTwo+"</option>");
		  }
		  //form表单重新渲染
		  form.render();
	  });
	  
	  var url = "../../../purchaseOrder/findById.action";
	  var poId=getUrlParam('poId');
	  var data={poId:poId}
	  $.post(url,data,function(mes){
		  //alert(mes.conId);
		  $("#poRemark").val(mes.poRemark);
		  document.getElementById('conId').value=mes.conId;
		  //form表单重新渲染
		  form.render();
	  });
		
	  $('#tjcl').on('click', function(){
		  var poId=getUrlParam('poId');
		  //alert(proId);
		  window.location="poBreakdownAdd.html?poId="+poId;
	  });
	   
	  $('#bcdd').on('click', function(){
		   var conId= document.getElementById('conId').value;
		   var poRemark=$("#poRemark").val();
		   var poSumnum=$("#poSumnum").val();
		   var poSumprice=$("#poSumprice").val();
		  if(conId==0){
			  layer.msg('请选择合同', {
				  icon: 1,
				  time: 1000 //1秒关闭（如果不配置，默认是3秒）
				}, function(){
					 //location.reload(); // 页面刷新
			 });
		  }else{
			   var a=layui.table.cache.testReload;
				var nums=document.getElementsByName("pobNum");
				//alert(a);
				//alert(nums.length);
				for(var i=0; i<nums.length; i++){
					a[i].pobNum=nums[i].value;
				}
				var ss=document.getElementsByName('pobPrice');
				for(var i=0;i<ss.length; i++){
					a[i].pobPrice=ss[i].value;
			   	}
				var re=document.getElementsByName('pobRemark');
				for(var i=0;i<re.length; i++){
					a[i].pobRemark=re[i].value;
			   	}
				
				for(var i=0 ; i<a.length; i++){
					a[i].cztime=a[i].time;
				}
				a=JSON.stringify(a);
				
				//alert(a);
				//使用jquery的ajax方式向后台提交数据
				var url = "../../../poBreakdown/updateOrAdd.action";
				var data={a:a,conId:conId,poRemark:poRemark,poSumnum:poSumnum,poSumprice:poSumprice};
				$.post(url,data,function(mes){
					if(mes.num>0){
						layer.msg('保存成功', {
							  icon: 1,
							  time: 1000 //1秒关闭（如果不配置，默认是3秒）
							},function(){
								//window.location="purchaseOrder.html";
								parent.location.reload(); // 父页面刷新
						});
					}
				});
		  }
		  
	   });
});
//限制数字的输入
function clearNoNum(obj){ 
    obj.value = obj.value.replace(/[^\d]/g,"");  //清除“数字”和“.”以外的字符  
    if(obj.value ==0){
    	obj.value = "0";
    }
    if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
        obj.value= parseFloat(obj.value); 
    }
   	if(obj.value.indexOf(".")==0){//第一个字符不能为.
    	 obj.value="0";
    } 
   	var a=layui.table.cache.testReload;
   	var sumPrice=0;
   	var sumNum=0;
   	for(var i=0 ;i< a.length; i++){
   		if(obj.id==a[i].pobId){
   			$("#"+a[i].matId).val(a[i].matPrice*obj.value);
   		}
   		var pri=$("#"+a[i].matId).val();
   		var num=$("#"+a[i].pobId).val();
   		sumPrice=sumPrice+Number(pri);
   		sumNum=sumNum+Number(num);
   	}
   	$("#poSumprice").val(sumPrice);
   	$("#poSumnum").val(sumNum);
}
</script>
<div class="layui-form-item">
   <label class="layui-form-label">采购备注</label>
   <div class="layui-input-inline">
     <input type="text" name="poRemark" id="poRemark" maxlength="20" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
   </div>
   <label class="layui-form-label">采购总重量(g)</label>
   <div class="layui-input-inline">
     <input type="text" name="poSumnum" id="poSumnum"  autocomplete="off" class="layui-input layui-disabled" readonly="readonly">
   </div>
   <label class="layui-form-label">采购总金额</label>
   <div class="layui-input-inline">
     <input type="text" name="poSumprice" id="poSumprice"  autocomplete="off" class="layui-input layui-disabled" readonly="readonly">
   </div>
</div>
</body>
</html>